
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/model/alert_event_model.dart';
import 'package:syn_4s/core/model/map_all_device_model.dart';
import 'package:syn_4s/ui/shared/app_theme.dart';

class GoogleMapItem extends StatelessWidget {

  final MapAllDeviceModel? mapAllDeviceModel;

  const GoogleMapItem(this.mapAllDeviceModel, {super.key});


  @override
  Widget build(BuildContext context) {
    return Container(
      height: 160.px,
      margin: EdgeInsets.only(top: 10.px, left: 6.px, right: 6.px),
      child: ListView.separated(
          itemCount: 5,
          itemBuilder: (ctx, index){
            return getItem(index);
          },
          separatorBuilder: (ctx, index){
            return SizedBox(height: 4.px, );
          }
      ),
    );
  }

  Widget getItem(int index){
    List<AlertEventModel> alertEvent = mapAllDeviceModel!.alertEvent!;
    return Container(
      padding: EdgeInsets.symmetric(vertical: 8.px, horizontal: 12.px),
      decoration: BoxDecoration(
          color: Colors.white60,
          borderRadius: BorderRadius.circular(4.px)
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("${alertEvent[index].alertName}", style: TextStyle(fontSize: 14.px, color: AppTheme.textColor),),
          Text("${alertEvent[index].alertAt}", style: TextStyle(fontSize: 14.px, color: AppTheme.textColor),),
          Row(
            children: [
              // SvgPicture.asset(isShow ? "assets/images/map_alert.svg" : "", width: 12.px, height: 12.px),
              SvgPicture.asset("assets/images/map_alert.svg", width: 12.px, height: 12.px),
              SizedBox(width: 2.px),
              Text("${alertEvent[index].reason}", style: TextStyle(fontSize: 14.px, color: AppTheme.orangeColor),)
            ],
          )
        ],
      ),
    );
  }

}
